<template>
    <div class="app_buyrecord_panel">
        <!--中奖记录-->
        <!--<div style="height: 20px;">-->
        <!--</div>-->
        <div class="card-container">
            <div class="card-list" v-for="data,key in dataList" :key="key" v-show="dataList.length>0">
                <div class="card-wrap" @click="showDataDetail(data)">
                    <div class="activity-name">
                        {{data.activityName}}
                    </div>
                    <div class="isship">
                      <template v-if="data.expired&&data.isship">
                          已失效
                      </template>
                        <template v-else>
                            领奖状态: {{data.isshipStr}}
                        </template>
                    </div>

                    <div class="item-title">
                        <div>
                            <span>奖项名</span>
                            <span>达标时间</span>
                        </div>
                    </div>
                    <div class="item-list">
                        <div class="item" v-for="record in data.scheduleRecords" :key="record.id">
                            <div>
                                <span>{{record.prizeName}}</span>
                                <span>{{record.recordsTime}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <ul class="mui-table-view" v-show="!dataList.length>0&&showNoRecord">
            <div class="cmw_noinvest" style="margin-top: 20px">
                暂无记录!
            </div>
        </ul>
    </div>
</template>

<script>
    import {Toast, Dialog} from 'vant';
    import Vue from 'vue'
    import Cookies from 'js-cookie';
    Vue.use(Dialog)
    export default {
        name: "Sharerecord",
        data() {
            return {
                token: '',
                dataList: [],
                noRecord: false,
                showNoRecord:false
            }
        },
        mounted() {
            this.token = Cookies.get("token")
            this.fetchRecommendActivitySchedule()
        },
        methods: {
            // 回退
            goBack() {
                this.$router.push({
                    path: "/recommend_activity"
                });
            },
            fetchRecommendActivitySchedule(){
                this.showNoRecord=false;
                this.$api.personInf.recommendActivitySchedule({openId: this.token}).then(res => {
                    if (res.code == 0) {
                        this.dataList = res.data;
                        if(!res.data)this.showNoRecord=true;
                        console.log("list",this.dataList)
                    } else {
                        Toast(res.msg)
                        this.noRecord = true;
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            showDataDetail(item){
                this.$router.push({
                    path: "/recommend_scheduleDetail",
                    query: {
                        id: item.id
                    }
                });
            }
        }
    }
</script>

<style lang="less" scoped>
    .app_buyrecord_panel {
        font-size: 14px;
        text-align: center;
        margin-top: 0px;
        .app_buyrecord_tab {
            line-height: 28px;
            overflow: hidden;
            width: 100%;
            .title {
                float: left;
                display: inline;
                overflow: hidden;
                /*background: #F3F3F3;*/
                font-size: 16px;
                /*font-weight: bold;*/
                color: #ffffff;
                padding: 10px 0;
            }
            .word {
                float: left;
                display: inline;
                overflow: hidden;
                background: #FFFFFF;
                padding: 5px 0;
                font-size: 14px;
                color: #2C2C2C;
                border-bottom: 1px solid #F3F3F3;
            }
            .cmw_noinvest {
                color: orangered;
                padding: 10px;
                text-align: center;
                font-size: 16px;
            }
        }


        .card-container{
            .card-list{
                .card-wrap{
                    margin: 0 10px;
                    margin-top: 20px;
                    padding: 10px;
                    margin-bottom: 5px;
                    border-radius: 10px;
                    display: block;
                    break-inside: avoid;
                    background-color: #8D89D1;
                    overflow: hidden;
                    color: #e6e6e6;
                    .activity-name{
                        font-size: 18px;
                        height: 40px;
                        line-height: 40px;
                        text-align: center;
                    }
                    .isship{
                        text-align: right;
                        margin: 5px;
                        margin-right: 10px;
                    }
                    .item-title,.item{
                        display: flex;
                        flex-flow:row;
                    }
                    .item-title > div, .item > div {
                        display: inline-block;
                        margin: 5px;
                        padding: 10px;
                        flex-grow: 1;
                        height: 20px;
                        line-height: 20px;
                        background-color: rgba(0,0,0,0.05);
                        border-radius: 10px;
                    }
                    .item-title > div > span,.item > div > span{
                        display: inline-block;
                        width: 50%;
                    }
                }
            }
        }
    }


</style>
